<template>
	<view class="container">
		<view class="main">
			<view class="mobile">
				<text>请输入6位支付密码</text>
				<view class="imgs" @click="handleIsShowCode">
					<image v-if="isShowCode" src="/static/close.png" mode="aspectFill"></image>
					<image v-if="!isShowCode" src="/static/open.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="pay-code">
				
				<input type="number" focus="true" v-model="payCode" maxlength="6" @input="getPayCode"/>
						
				<block v-for="(item, index) in ranges" :key="index">
					<view :class="['box', { active: codeIndex === item}]">
						<view class="line"></view>
						<text v-if="isShowCode">{{ codeArr[index] ? codeArr[index] : ''}}</text>
						<text v-if="!isShowCode" style="position: absolute;left: 50%;transform: translate(-50%, -40%);top: 50%;">{{ codeArr[index] ? '*' : ''}}</text>
					</view>
				</block>
			</view>
		</view>
		<view class="button" @click="handleComfirmCode">确认</view>
	</view>
</template>

<script>

export default {
	data() {
		return {
			payCode: '',//我的密码
			codeIndex: 1,
			codeArr: [],//密码
			ranges: [1, 2, 3, 4, 5 ,6],
			isShowCode: true,
			path: '',//设置完密码回哪里
			userType: 0,//用户类型0 雇员，1雇主
		}
	},
	methods: {
		// 是否显示明文
		handleIsShowCode() {
			this.isShowCode = !this.isShowCode
			console.log('this.isShowCode', this.isShowCode)
		},
		
		// 得到输入的密码
		getPayCode (e) {
			let { value } = e.detail
			this.payCode = value
			this.codeArr = value.split('')
			this.codeIndex = this.codeArr.length + 1
			// console.log('payCode',this.payCode,'codeArr', this.codeArr)
		},
		
		// 下一步确认密码
		async handleComfirmCode () {
			if (this.payCode.length != 6) return uni.showToast({ title: '请输入6位密码~', icon: 'none' })
			let res = await this.$fetch(this.$api.upd_pay_pwd, { payPwd: this.payCode }, 'POST')
			if (res.code) return uni.showToast({ title: res.msg, icon: 'none' })
			
			uni.showToast({ title: '密码设置成功', icon: 'none' })
			uni.setStorageSync("isHavePayPassword", true)
			if(this.path=='wallet') {
				if(this.userType==1) {
					setTimeout(() => { uni.redirectTo({ url: '/pages/my-wallet/boss-my-wallet'}) }, 800)
				}else {
					setTimeout(() => { uni.redirectTo({ url: '/pages/my-wallet/my-wallet'}) }, 800)
				}
			}else {
				setTimeout(() => { uni.navigateBack({ delta: 2 }) }, 800)
			}
		},
	},
	onLoad(options) {
		this.path = options.path
		this.userType = uni.getStorageSync('userType') 
	}
}
</script>

<style scoped lang="less">
	.container{
		position: relative;
		
		overflow: hidden;
		& > .main{
			padding: 30rpx;
			margin-top: 30rpx;
			margin-bottom: 140rpx;
			background-color: #FFFFFF;
			.mobile {
				display: flex;
				text-align: right;
				justify-content: space-between;
				// border: 1px solid #000000;
				height: 40rpx;
				margin-bottom: 46rpx;
				color: rgba(64,33,16,0.50);
				& > .imgs {
					image {
						width: 50rpx;
						height: 40rpx;
						// background-color: #007AFF;
					}
				}
			}
			.pay-code {
				padding-bottom: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				flex-wrap: wrap;
				position: relative;
				& > input {
					position: absolute;
					top: 0;
					left: -100%;
					width: 200%;
					height: 100%;
					text-align: left;
					z-index: 9;
					opacity: 1;
				}
				& > .box {
					position: relative;
					width: 90rpx;
					height: 90rpx;
					margin-right: 30rpx;
					font-size: 22px;
					line-height: 90rpx;
					box-sizing: border-box;
					background-color: #F2F2F2;
					border-radius: 2px;
					&:last-child {
						margin-right: 0;
					}
				}
				& > .active {
					border: 2rpx solid #cccccc;
					@keyframes twinkling {
						0% {
							opacity: 0.1;
						}
						50% {
							opacity: 0.8;
						}
						100% {
							opacity: 0.1;
						}
					}
					& > .line {
						display: block;
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
						width: 2upx;
						height: 40upx;
						background: #333333;
						animation: twinkling 1s infinite ease;
					}
				}
			}
		}
		& > .button {
			width: 690rpx;
			margin: 0 auto;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #FCC928;
			&:active {
				opacity: 0.7;
			}
		}
	}
</style>
